<template>
    <div class="tablefilter">
      <el-button type="text" @click="dialogHidClick('show')" class="el-icon-setting btn-size-big"></el-button>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        >
      <el-checkbox-group v-model="checkedTable" id="sortcontent">
        <el-checkbox
        class="sortdiv"
        v-for="(tables,key) in tableAll"
        :label="tables.column"
        :key="key">{{tables.name}}</el-checkbox>
      </el-checkbox-group>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogHidClick('hid')">取 消</el-button>
          <el-button type="primary" @click="dialogHidClick('sure')">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
import Sortable from 'sortablejs'
import { mapActions, mapGetters } from 'vuex'
import { getColumns , postColumns } from '@/api/TableFilter'

export default {
    props:{
      getColumnsRoute:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        sortable: null,
        dialogVisible: false,
        tableAll:[],
        checkedTable : [],
        storeClickTable: []
      };
    },
    methods: {
      ...mapActions([
        'SetTableContent',
      ]),
      getData(){
        let that = this
        getColumns({route :that.getColumnsRoute}).then((res)=>{
          that.dataMap(res.data)
        })
      },
      // 拖拽
      setSort(el) {
        if (el) {
          let that = this
          that.sortable = Sortable.create(el, {
            onEnd: evt => {
              that.tableAll.splice(evt.newIndex, 0, that.tableAll.splice(evt.oldIndex, 1)[0]);
              var newArray = that.tableAll.slice(0);
              that.tableAll = [];
              that.$nextTick(function () {
                that.tableAll = newArray
              });
            }
          })
        }

      },
      dataMap(data){
        let that = this
        let _filterdata = []
        let _checkedTable = []
        if (data) {
          data.map((item, index)=>{
            if (item.checked == true) {
              let _newItem = {
                label: item.name,
                field: item.column,
                align: 'center'
              }
              _filterdata.push(_newItem)
              _checkedTable.push(item.column)
            }
          })
          that.tableAll = data || []
          that.checkedTable = _checkedTable
          that.storeClickTable = JSON.parse(JSON.stringify(_checkedTable))
        }
        that.SetTableContent(_filterdata)
      },
      // 确定设置字段
      dialogHidClick(type){
        let that = this
        switch (type) {
          case 'show' :
            setTimeout(()=>{
              let el = document.getElementById('sortcontent')
              that.setSort(el)
            },1000)

            that.dialogVisible = true
            break;
          case 'sure':
            //拖拽问题 处理点击
            that.tableAll.map((item, index)=>{
              if (that.checkedTable.indexOf(item.column) != -1) {
                item.checked = true
              }else{
                item.checked = false
              }
            })
            let _data = {
              route : that.getColumnsRoute,
              columns : that.tableAll
            }
            postColumns(_data).then(()=>{
              that.getData()
            })
            this.dialogVisible = false
            break;

          case 'hid':
            that.checkedTable = that.storeClickTable
            this.dialogVisible = false
            break;
          default:
            break;
        }

      }
    },
    mounted () {
      this.getData()
    },
     watch : {
        getColumnsRoute(newval, oldval){
          // console.log(newval)
          if (newval != oldval) {
            this.getData()
          }
        }
    }
}
</script>

<style lang="scss">
  .tablefilter{
    float: right;
    .btn-size-big{
        font-pageSize: 20px;
    }
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      .el-checkbox{
        margin-left: 0px;
        width: 100%;
      }
    }
  }
</style>




